<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="iceStone <ice@wedn.net>">
  <title>产品页</title>
  <!--小图标-->
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/nav.css">
  <link rel="stylesheet" href="css/footer.css">
  <link rel="stylesheet" href="css/product.css">
</head>

<body>
	<!-- 导航 -->
	<nav class="navbar navbar-default vivioNav">
	  <div class="container">
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#vivio-navbar-collapse" aria-expanded="false">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="vivio-icon-bt vivio-icon-bar"></span>
	        <span class="vivio-icon-bt vivio-icon-close"></span>
	      </button>
	      <a id="vivio-navbar-brand" href="#"></a>
	      <a id="newVersion" href="#">进入新版vivo官网</a>
	    </div>
	    <div class="collapse navbar-collapse" id="vivio-navbar-collapse">
	      <ul class="nav navbar-nav vivio-navbar-nav">
	        <li><a href="index.html">首页 <span class="sr-only">(current)</span></a></li>
	        <li class="active" id="vivio-product-link">
	          <a href="product.html">产品</a>
	          <!-- 产品下拉导航菜单 -->
	          <div class="vivio-product">
	            <div class="vivio-container clearfix">
	               <dl>
	                <dt><a href="">最新</a></dt>
	                <dd><a href="">X9L</a></dd>
	                <dd><a href="">Y53</a></dd>
	                <dd><a href="">Xplay6磨砂黑</a></dd>
	                <dd><a href="">X9i</a></dd>
	                <dd><a href="">Y66</a></dd>
	              </dl>
	              <dl>
	                <dt><a href="#">Xplay系列</a></dt>
	                <dd><a href="">Xplay6磨砂黑</a></dd>
	                <dd><a href="">Xplay6</a></dd>
	                <dd><a href="">Xplay5旗舰版</a></dd>
	                <dd><a href="">Xplay5</a></dd>
	                <dd><a href="">Xplay3S</a></dd>
	              </dl>
	              <dl>
	                <dt><a href="#">X系列</a></dt>
	                <dd><a href="">X9L</a></dd>
	                <dd><a href="">X9i</a></dd>
	                <dd><a href="">X9Plus</a></dd>
	                <dd><a href="">X9</a></dd>
	                <dd><a href="">X7</a></dd>
	              </dl>
	              <dl>
	                <dt><a href="#">Y系列</a></dt>
	                <dd><a href="">Y53</a></dd>
	                <dd><a href="">Y66</a></dd>
	                <dd><a href="">Y67</a></dd>
	                <dd><a href="">Y55</a></dd>
	                <dd><a href="">Y51电信高配版</a></dd>
	              </dl>
	              <dl>
	                <dt><a href="">其它系列</a></dt>
	                <dd><a href="">V3全网通</a></dd>
	                <dd><a href="">V3Max全网通</a></dd>
	                <dd><a href="">V3Max</a></dd>
	                <dd><a href="">V3</a></dd>
	              </dl>
	            </div>
	          </div>
	          <!-- /产品下拉导航菜单 -->
	        </li>
	        <li><a href="#">商城</a></li>
	        <li><a href="store.html">体验中心</a></li>
	        <li><a href="#">Funtouch OS</a></li>
	        <li><a href="#">社区</a></li>
	        <li><a href="#">服务</a></li>
	      </ul>
	      <ul class="nav navbar-nav navbar-right hidden-xs">
	        <li class="nav-t-kefu"><span class="vivio-icon"></span><em>小V在线客服</em></li>
	        <li class="nav-t-search"><span class="vivio-icon"></span></li>
	        <li class="nav-t-userInformation"><span class="vivio-icon"></span></li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /.container -->
	</nav>
	<!-- /导航 -->
	<main class="container-fluid vivio-container-fluid hidden-xs">
		<div class="vivio-products vivio-main-content">
		<!-- 推荐产品 -->
		<h2>
			<i></i>
			<strong>推荐产品</strong>
		</h2>
		<div class="products-list clearfix">
			<div class="col-lg-8 col-md-8 col-sm-8 vivio-product-left clearfix">
				<a href="x9.html" class="clearfix">
					<div class="col-lg-6 col-md-6 col-sm-6 bigBox">
						<div class="boxItem">
							<h2><img src="img/products/nba0510-cust-title.jpg" height="55" width="245" alt=""></h2>
							<span class="more">了解详情</span>
						</div>
					</div>	
					<div class="col-lg-6 col-md-6 col-sm-6">
						<img src="img/products/nba0609-cust-figure.jpg" height="332" width="267" alt="">
					</div>		
				</a>
				<div class="col-lg-6 col-md-6 col-sm-6 smallBox">
					<a href="">
						<h3><img src="img/products/y53-promos-title.jpg" height="55" width="130" alt=""></h3>
						<span class="more">了解详情</span>
						<div class="figure">
							<img src="img/products/y53-promos-figure.jpg" height="180" width="210" alt="">
						</div>
					</a>
				</div>
				<div class="col-lg-6 col-md-6 col-sm-6 smallBox">
					<a href="">
						<h3><img src="img/products/y55-promos-title.jpg" height="50" width="70" alt=""></h3>
						<span class="more">了解详情</span>
						<div class="figure">
							<img src="img/products/y55-promos-figure.jpg" height="190" width="180" alt="">
						</div>
					</a>
				</div>
			</div>
			<div class="col-lg-4 col-md-4 col-sm-4 vivio-product-right">
				<a href="">
					<h3>
						<img src="img/products/xplay6-promos-title.jpg" height="75" width="115" alt="">
					</h3>
					<span class="more">了解详情</span>
					<div class="figure">
						<img src="img/products/xplay6-promos-figure.jpg" height="450" width="350">
					</div>
				</a>
			</div>	
		</div>
		<!-- /推荐产品 -->
		
		<!-- /全部产品 -->
		<h2>
			<i></i>
			<strong>全部产品</strong>
		</h2>
		<div class="allProduct">
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/c291aa4f2ef7eed5a4ae5761f52a7091.png"  height="248" width="248" alt="">
					<h3>X9L</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/e8863d54184be48c8d4ad71c6ea82077_248x248.png" height="248" width="248" alt="">
					<h3>Y53</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/2292a1b3469311548a73a6ddbc5e4f60_248x248.png" height="248" width="248" alt="">
					<h3>Xplay6磨砂黑</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/78a5aa95f30780413cff422c860ba803_248x248.png" height="248" width="248" alt="">
					<h3>X9i</h3>
					</a>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/8ad18b67486ef0250b1739b3b518b40f_248x248.png" height="248" width="248" alt="">
					<h3>Y66</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/2c83e6252eb516291eecaabf0fdebe16_248x248.png" height="248" width="248" alt="">
					<h3>X9Plus</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/80539c7d0fa77758f85ea04096e47743_248x248.png" height="248" width="248" alt="">
					<h3>Xplay6</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/1ff43b403c876105fa3e68aa03a36d2a_248x248.png" height="248" width="248" alt="">
					<h3>X9</h3>
					</a>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/823567b7584045a8007600c572ee29b9_248x248.png" height="248" width="248" alt="">
					<h3>Y67</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/4ccdfec60fdaa509ba764294bd642b14_248x248.png" height="248" width="248" alt="">
					<h3>Y55</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/58b06c7dddc95e97581bf72fcbd060fd_248x248.png" height="248" width="248" alt="">
					<h3>X7</h3>
					</a>
				</div>
				<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 itemBox">
					<a href="">
					<img src="img/products/allProduct/715cf52b293c2225c709c684c541af11_248x248.png" height="248" width="248" alt="">
					<h3>X7Plus</h3>
					</a>
				</div>
			</div>
			
		</div>
		<!-- 全部产品 -->
		<!-- 翻页按钮 -->
		<div class="page">
			<ul>
				<!-- <li><a href="./product1.html" class="pre"></a></li> -->
				<li><a href="./product1.html" class="current">1</a></li>
				<li><a href="./product2.html">2</a></li>
				<li><a href="./product3.html">3</a></li>
				<li><a href="./product4.html">4</a></li>
				<li><a href="./product5.html">5</a></li>
				<li><a href="./product6.html">6</a></li>
				<li><a href="./product7.html">7</a></li>
				<li><a href="./product8.html">8</a></li>
				<li><a href="./product2.html" class="next"></a></li>
			</ul>
			<form action="">
				<input type="text" value="1">
				<span>&nbsp;/8</span>
				<button type="sumbit">GO</button>
			</form>
		</div>
		<!-- \翻页按钮 -->
	</div> 
	</main>
	<!-- 尾部 -->
	<footer>
		  <div class="row">
		    <img src="img/vivo-f-logo-x2.jpg" height="50" width="125">
		  </div>
		  <div class="row shareLink">
		    <a href="#" class="share-weibo"><b></b></a>
		    <a href="" class="share-wechact"><b></b></a>
		    <a href="" class="share-vi"><b></b></a>
		    <a href="" class="share-tieba"><b></b></a>
		    <a href="" class="share-buluo"><b></b></a>
		    <a href="" class="share-kefu"><b></b>小V在线客服</a>
		  </div>
		  <div class="row siteLinks">
		    <a href="">新闻中心</a>
		    <a href="">vivo招聘 </a>
		    <a href="">vivo摄影 </a>
		    <a href="">采购平台 </a>
		    <a href="">开发者平台</a>
		    <a href="">手机寻回</a>
		    <a href="">网站地图</a>
		    <a href="">手机真伪查询</a>
		    <a href="">免责声明</a>
		    <a href="" id="footerEnglish">English <span></span></a>
		  </div>
		  <div class="row copyRight">
		    <p>COPYRIGHT © 1996-2017 <br>ALL RIGHTS RESERVED. <a href="#" title="企业名称：广东步步高电子工业有限公司 法定代表人：甄志强 标识状态：已激活 粤工商备P191704002445" target="_blank">粤ICP备05100288号-8 <img src="img/gssw-icon-x2.png"  alt=""></a></p>
		  </div>
	</footer>
	<!-- /尾部 -->

</body>
  <script src="lib/jquery/jquery.js"></script>
  <script src="lib/bootstrap/js/bootstrap.js"></script>
  <script src="js/nav.js"></script>
  <script>
  	$(function() {
		$('main').css('margin-bottom', $('footer').height());
	});
  </script>

</html>
